<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	
	<link href="../../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}" rel="stylesheet">
	<style>
	    body {
	        max-width: 1000px;
	        margin: auto;
	        padding: 20px;
	    }
	    h3{
	        margin-top: 1.2rem;
	        border-bottom: 1px #eee solid;
	    }
	    .row{
	        margin-bottom: 10px;
	    }
	    .pd5{
	        padding: 5px;
	    }
	    .pd10{
	        padding: 10px;
	    }
	    .mg5 {
	        margin: 5px;
	    }
	    .mg10 {
	        margin: 10px;
	    }
	    .mb10 {
	        margin-bottom: 10px;
	    }
	</style>
</head>

<body>
<div class="container">
	<div class="row">
	    <div class="col-lg-6">
	        <div class="input-group">
	            <input type="text" class="form-control" id="toSearch">
	            <div class="input-group-btn">
	                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	                    <span class="caret"></span>
	                </button>
	                <ul class="dropdown-menu dropdown-menu-right" role="menu">
	                </ul>
	            </div>
	            <!-- /btn-group -->
	        </div>
	    </div>
	</div>
	
	
</div>


<!-- 全局js -->
<script src="../../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
<script src="../../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>
<!-- 搜索建议提示插件 -->
<script src="../../../static/js/plugins/suggest/bootstrap-suggest.min.js" th:src="@{/static/js/plugins/suggest/bootstrap-suggest.min.js}"></script>

<script type="text/javascript">
	$(function(){
		//初始化
		/* function toInit(){
			$("#toSearch").bsSuggest("init", {
			clearable: true,
			url: "payMode.json",
			idField: "id",
			keyField: "name"
			  })
			  .on("onDataRequestSuccess", function(e, result) {
				console.log("onDataRequestSuccess: ", result);
			  })
			  .on("onSetSelectValue", function(e, keyword, data) {
				console.log("onSetSelectValue: ", keyword, data);
			  })
			  .on("onUnsetSelectValue", function() {
				console.log("onUnsetSelectValue");
			  })
			  .on("onShowDropdown", function(e, data) {
				console.log("onShowDropdown", e.target.value, data);
			  })
			  .on("onHideDropdown", function(e, data) {
				console.log("onHideDropdown", e.target.value, data);
			  });
		} */
		//
	  $("#toSearch").bsSuggest({
	    url: "payMode.json",
	    effectiveFieldsAlias: { name: "支付方式" },
	    effectiveFields: ["id", "name", "shortAccount"],
	    ignorecase: true,
	    showHeader: true,
	    showBtn: false, //不显示下拉按钮
	    delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
	    idField: "id",
	    keyField: "name",
	    clearable: true
	  })
	  .on("onDataRequestSuccess", function(e, result) {
	    console.log("onDataRequestSuccess: ", result);
	  })
	  .on("onSetSelectValue", function(e, keyword, data) {
	    console.log("onSetSelectValue: ", keyword, data);
	  })
	  .on("onUnsetSelectValue", function() {
	    console.log("onUnsetSelectValue");
	  });
  });
		
</script>
</body>

</html>
